/* -----------------------------------------
   Bootstrap sliders
----------------------------------------- */
.slider {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin-top: 9px;
	&.slider-horizontal {
		width: 100%;
		height: @slider-line-height;
		.slider-track {
			height: (@slider-line-height/2);
			width: 100%;
			margin-top: (-@slider-line-height/4);
			top: 50%;
			left: 0;
		}
		.slider-selection {
			height: 100%;
			top: 0;
			bottom: 0;
		}
		.slider-handle {
			margin-left: (-@slider-line-height/2);
			margin-top: (-@slider-line-height/2.5);
		}

		&#slider-primary {
			.slider-selection {background: @slider-selection-primary-background; }
			.slider-handle { background: @slider-selection-primary-background !important;}
		}

		&#slider-info {
			.slider-selection {background: @slider-selection-info-background; }
			.slider-handle { background: @slider-selection-info-background !important;}
		}
		&#slider-danger {
			.slider-selection {background: @slider-selection-danger-background; }
			.slider-handle { background: @slider-selection-danger-background !important;}
		}
		&#slider-success {
			.slider-selection {background: @slider-selection-success-background; }
			.slider-handle { background: @slider-selection-success-background !important;}
		}
		&#slider-warning {
			.slider-selection {background: @slider-selection-warning-background; }
			.slider-handle { background: @slider-selection-warning-background !important;}
		}
	}
	&.slider-vertical {
		height: 210px;
		width: @slider-line-height;
		margin-right: 10px;
		.slider-track {
			width: (@slider-line-height/2);
			height: 100%;
			margin-left: (-@slider-line-height/4);
			left: 50%;
			top: 0;
		}
		.slider-selection {
			width: 100%;
			left: 0;
			top: 0;
			bottom: 0;
		}
		.slider-handle {
			margin-left: (-@slider-line-height/2.5);
			margin-top: (-@slider-line-height/2);
		}

		&#slider-primary {
			.slider-selection {background: @slider-selection-primary-background; }
			.slider-handle { background: @slider-selection-primary-background !important;}
		}

		&#slider-info {
			.slider-selection {background: @slider-selection-info-background; }
			.slider-handle { background: @slider-selection-info-background !important;}
		}
		&#slider-danger {
			.slider-selection {background: @slider-selection-danger-background; }
			.slider-handle { background: @slider-selection-danger-background !important;}
		}
		&#slider-success {
			.slider-selection {background: @slider-selection-success-background; }
			.slider-handle { background: @slider-selection-success-background !important;}
		}
		&#slider-warning {
			.slider-selection {background: @slider-selection-warning-background; }
			.slider-handle { background: @slider-selection-warning-background !important;}
		}
	}
	&.slider-disabled {
		.slider-handle {
			#gradient > .vertical(#dfdfdf, #bebebe);
		}
		.slider-track {
			#gradient > .vertical(#e5e5e5, #e9e9e9);
			cursor: not-allowed;
		}
	}
	input {
		display: none;
	}
	.tooltip {
		&.top {
			margin-top: -36px;
		}
	}
	.tooltip-inner {
		white-space: nowrap;
	}
	.hide {
		display: none;
	}
}

.slider-track {
	position: absolute;
	cursor: pointer;
	background: @slider-track-background !important;
	border-radius: @slider-border-radius !important;
}
.slider-selection {
	position: absolute;
	background: @slider-selection-background;
	.box-sizing(border-box);
	border-radius: @slider-border-radius;
}
.slider-handle {
	position: absolute;
	width: @slider-line-height/4 + @slider-line-height;
	height: @slider-line-height/4 + @slider-line-height;
	background-color: @slider-selection-background !important;
	filter: none;
	border-radius: 50%;
	border: 2px solid @slider-handle-border !important;
}
